<template>
	<app-layout>
		<view v-for="(item, index) in list" :key="index">
			<view>
				<app-video :pic-url="item.pic_url" :url="item.url"></app-video>
			</view>
			<view class="video">
				<view class="title">{{item.title}}</view>
				<view class="content" :class="active !== index ? 'active' : ''">{{item.content}}</view>
				<view class="other dir-left-nowrap cross-center">
					<view class="box-grow-1">{{item.time}}</view>
					<image src="../../static/image/icon/arrow-right.png" class="img" @click="click(index)"
						:class="active === index ? 'active' : ''"></image>
					<view class="box-grow-0" @click="click(index)">{{active === index ? '收起' : '展开'}}</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appVideo from "../../components/page-component/app-video/app-video.vue";

	let page = 1;
	let is_no_more = false;
	let is_loading = false;
	export default {
		name: "video",
		components: {
			'app-video': appVideo,
		},
		data() {
			return {
				list: [],
				active: -1,
			};
		},
		onLoad() {
			page = 1;
			is_no_more = false;
			is_loading = false;
			this.loadData();
		},
		onPageScroll(e) {
			this.$store.dispatch('page/actionSetScrollTop', e.scrollTop);
		},
		onReachBottom() {
			if (is_no_more) return;
			this.loadData();
		},
		methods: {
			loadData() {
				if (is_loading) {
					return;
				}
				this.$showLoading();
				is_loading = true;
				this.$request({
					url: this.$api.video.index,
					data: {
						page: page
					}
				}).then(response => {
					this.$hideLoading();
					if (response.code === 0) {
						this.list = this.list.concat(response.data.list);
						if (response.data.list.length === 0) {
							is_no_more = true;
						}
						page++;
					}
					is_loading = false;
				}).catch(() => {
					this.$hideLoading();
					is_loading = false;
				})
			},
			click(index) {
				if (this.active === index) {
					this.active = -1;
				} else {
					this.active = index;
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.video {
		padding: #{24rpx};
	}

	.title {
		color: $uni-important-color-black;
		margin-top: #{24rpx};
	}

	.content {
		font-size: $uni-font-size-general-one;
		color: $uni-general-color-two;
		margin-top: #{40rpx};
	}

	.content.active {
		word-break: break-all;
		white-space: pre-wrap;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.other {
		font-size: $uni-font-size-weak-one;
		color: $uni-general-color-two;
		margin-top: #{36rpx};
		margin-bottom: #{40rpx};
	}

	.img {
		height: #{22rpx};
		width: #{12rpx};
		margin-right: #{16rpx};
		transform: rotate(90deg);
	}

	.img.active {
		transform: rotate(-90deg);
	}
</style>
